<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getActs">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="acticity" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="expand"  class = "expand-div">
                <template slot-scope="scope">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="类别">
                            <span>{{ getTypeNamr(scope.row.actType) }}</span>
                        </el-form-item>
                        <el-form-item label="详情">
                            <span>{{ scope.row.actSummary }}</span>
                        </el-form-item>
                        <el-form-item label="人数上限">
                            <span>{{ scope.row.actMaxNum }}人</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="actName" label="活动名称"sortable>
                <template slot-scope="scope">
                    <span style="cursor: pointer;color:#20a0ff;font-weight: bold" @click="handleEdit(scope.$index, scope.row)">{{scope.row.actName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="actStartDate" label="开始时间" sortable>
            </el-table-column>
            <el-table-column prop="actOldDate" label="结束时间" sortable>
            </el-table-column>
            <el-table-column prop="actAddress" label="地址" sortable>
            </el-table-column>
            <el-table-column prop="actImg" label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.actImg" style="width: 100px;height: 40px;">
                </template>
            </el-table-column>
            <el-table-column prop="actUserName" label="发起人" >
            </el-table-column>
            <el-table-column prop="actNum" label="报名人数"  sortable>
                <template slot-scope="scope">
                    <i class="fa fa-user" style="font-size:16px;color:red"></i>
                    {{scope.row.actNum}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template  slot-scope="scope">
                    <el-button size="small" @click="handleView(scope.$index, scope.row)">报名查看</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    <!--<el-button type="primary" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="活动名称"  prop="actName">
                    <el-input v-model="editForm.actName" placeholder="请输入活动名称"  style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="活动地址"  prop="actAddress">
                    <el-input v-model="editForm.actAddress"   placeholder="请输入活动地址" style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="联系电话"  prop="actPhone">
                    <el-input v-model="editForm.actPhone"  placeholder="请输入参加活动的联系电话"  style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="发起人">
                    <el-input v-model="editForm.actUserName"  style="width: 50%;" disabled></el-input>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="6">
                        <el-date-picker type="date" placeholder="开始时间" v-model="editForm.actStartDate"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="1" style="text-align: center">-</el-col>
                    <el-col :span="6">
                        <el-date-picker type="date" placeholder="结束时间" v-model="editForm.actOldDate"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="类别">
                    <el-radio-group v-model="editForm.actType">
                        <el-radio label="school" >高校</el-radio>
                        <el-radio label="compony" >机构</el-radio>
                        <el-radio label="teacher" >讲师</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="人数上限">
                    <el-input v-model="editForm.actMaxNum" type="number" style="width: 50%;"></el-input>（人）
                </el-form-item>
                <el-form-item label="活动详情" prop="actSummary">
                    <el-input type="textarea" v-model="editForm.actSummary" :rows="4" placeholder="请输入活动的详细介绍"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="actImg">
                    <el-upload
                            class="avatar-uploader"
                            action="api/upload/img"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="editForm.actImg" :src="editForm.actImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip" style="text-align: center;width: 300px">只能上传jpg文件，且不超过2M</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    import util from '../../common/js/util'
    import {  getAllAct, deleteActivityById, postActUpdate} from '../../api/api';
    import axios from 'axios';
    export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                acticity: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列
                newsImg: "",
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    actName: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' }
                    ],
                    actPhone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' }
                    ],
                    actAddress: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' }
                    ],
                    actSummary: [
                        { required: true, message: '请输入活动详情', trigger: 'blur' }
                    ],
                    actImg: [
                        { required: true, message: '请上传图片', trigger: 'blur' }
                    ]
                },
                //编辑界面数据
                editForm: {
                    id: 0,
                    name: '',
                    sex: -1,
                    age: 0,
                    birth: '',
                    addr: ''
                },
                // addFormVisible: false,//新增界面是否显示
                addLoading: false,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        methods: {
            //性别显示转换
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getActs();
            },
            handleAvatarSuccess(res, file) {
                // this.editForm.newsImg = file.url;
                let param = new FormData();
                param.append('img', file.raw);
                let config = {
                    headers: { 'Content-Type': 'multipart/form-data' }
                };
                axios.post("/api/upload/img",param,config).then(res => {
                    //console.log(res);
                    this.editForm.actImg = 'api/'+res.data.body
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //获取用户列表
            getActs() {
                let para = {
                    size: 10,
                    page: this.page,
                    name: this.filters.name,
                };
                this.listLoading = true;
                //NProgress.start();
                console.log(para);
                getAllAct(para).then((res) => {
                    this.total = res.data.body.length;
                    this.acticity = res.data.body;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { id: row.actId };
                    deleteActivityById(para).then((res) => {
                        this.listLoading = false;
                        util.getMessage(res,this,"删除成功");
                        this.getActs();
                    });
                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.editForm);
                            para.actStartDate= util.getCurrentTime(para.actStartDate);
                            para.actOldDate= util.getCurrentTime(para.actOldDate);
                            postActUpdate(para).then((res) => {
                                this.editLoading = false;
                                util.getMessage(res,this,"活动修改成功")
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getActs();
                            });
                        });
                    }
                });
            },
            handleView(index,row){
                if (row.actNum == 0){
                    this.$message.warning("该活动无人报名参加！！！");
                    return;
                }else {
                    this.$message.warning("功能暂未开发！！！");
                }
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.actId);
                console.log(ids);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    for(let id of  ids){
                        deleteActivityById({id: id}).then((res) => {
                            util.getMessage(res,this,"删除成功");
                            this.getActs();
                        });
                    }
                    this.listLoading = false;
                }).catch(() => {

                });
            },
            getTypeNamr(str){
                return util.getTypeName(str);
            }
        },
        mounted() {
            this.getActs();
        }
    }

</script>

<style lang="scss" scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 300px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 178px;
        display: block;
    }
    tbody .el-form-item{
        display: block !important;
    }

</style>